<template>
	<view class="container">
		<view class="my-bg">
			<navigator class="setting" url="setting"></navigator>
		</view>
		<navigator class="bar" url="person-data">
			<view class="photo">
				<view class="img"></view>
			</view>
			<view class="name">
				<view class="my-name">
					xhx7443512
				</view>
				<view class="slogan">
					优购优选，尽在欣华夏商城~
				</view>
			</view>
			<view class="grade">
				<view class="grade-text">
					普通用户
				</view>
			</view>
		</navigator>
		<view class="content">
			<view class="order">
				<view class="my-order">
					我的订单
				</view>
				<navigator class="order-all" url="myorder">
					<view class="all">
						查看全部
					</view>
					<view class="arrow"></view>
				</navigator>
			</view>
			<!-- <view class="order-state">
				<view class="order-box">
					<view class="state-img" id="payment"></view>
					<view class="state-text">待付款</view>
				</view>
				<view class="order-box">
					<view class="state-img" id="deliver"></view>
					<view class="state-text">待发货</view>
				</view>
				<view class="order-box">
					<view class="state-img" id="take"></view>
					<view class="state-text">待收货</view>
				</view>
				<view class="order-box">
					<view class="state-img" id="evaluate"></view>
					<view class="state-text">待评价</view>
				</view>
				<view class="order-box">
					<view class="state-img" id="after-sale"></view>
					<view class="state-text">退款/售后</view>
				</view>
			</view> -->
		</view>
		<view class="main">
			<!-- <navigator class="box" url="shopping-address">
				<view class="box-img" id="address"></view>
				<view class="box-text">收货地址</view>
				<view class="right"></view>
			</navigator> -->
			<view class="box">
				<view class="box-img" id="member"></view>
				<view class="box-text">会员中心</view>
				<view class="right"></view>
			</view>
			<view class="box"  @click="openFlag = true">
				<view class="box-img" id="service"></view>
				<view class="box-text">
					<view class="popup-content">
						联系客服
					</view>
				</view>
				<view class="right"></view>
			</view>
		</view>
		<view class="mobilleOpen" v-show="openFlag">
		   <image class="cloud" src="../../static/image/error.png" mode="" @click="closeMobille"></image>
		   <image src="../../static/image/mobile-bgc.png" mode=""></image>
		   <view class="mobileBottom">
		    <view class="welcome">欢迎致电</view>
		    <view class="welcomeNum">{{mobiles}}</view>
		    <view class="coplyMobile" @click="copy">拨打电话</view>
		   </view>
		</view>
		<view class="bgc" v-if="openFlag">
			
		</view>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		data(){
			return{
				openFlag: false,
				mobiles: '0731-666666666'
			}
		},
	    components: {
	        wybPopup
	    },
		methods:{
			copy(val) {
			    uni.makePhoneCall({
			     phoneNumber: this.mobiles //仅为示例
			    });
			
			   },
			closeMobille(){
				this.openFlag=false
			}
		}
	}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.bgc{
		background-color: rgba(0,0,0,0.8);
		z-index: 100;
		width: 100%;
		height:100vh;
		position: fixed;
		top: 0;
		left: 0;
	}
	.container{
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
		position: absolute;
	}
	.my-bg{
		height: 317rpx;
		background: linear-gradient(180deg, #F41640, #EE4F69);
	}
	.setting{
		width: 36rpx;
		height: 34rpx;
		background-image: url(../../static/image/setting.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 76rpx;
		right: 33rpx;
	}
	.bar{
		width: 710rpx;
		height: 207rpx;
		margin: 0 auto;
		margin-top: -186rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
	}
	.photo{
		width: 126rpx;
		height: 126rpx;
		background: #CCCCCC;
		border-radius: 50%;
		margin-top: 39rpx;
		margin-left: 51rpx;
		overflow: hidden;
	}
	.img{
		width: 91rpx;
		height: 92rpx;
		margin: 25rpx 19rpx;
		background-image: url(../../static/image/my-img.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.name{
		margin: 66rpx 28rpx;
	}
	.my-name{
		font-size: 32rpx;
		font-weight: normal;
		color: #4D4D4D;
		line-height: 41rpx;
	}
	.slogan{
		margin-top: 15rpx;
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
		line-height: 41rpx;
	}
	.grade{
		width: 131rpx;
		height: 29rpx;
		margin-top: 63rpx;
		background-image: url(../../static/image/grade.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.grade-text{
		line-height: 29rpx;
		margin-left: 40rpx;
		font-size: 20rpx;
		font-weight: normal;
		color: #FFFFFF;
	}
	.content{
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 21rpx auto;
		overflow: hidden;
		position: relative;
	}
	.order{
		display: flex;
	}
	.my-order{
		font-size: 30rpx;
		margin: 31rpx 28rpx;
		font-family: Adobe Heiti Std;
		font-weight: bold;
		color: #666666;
	}
	.order-all{
		display: flex;
		position: absolute;
		top: 50%;
		margin-top: -55rpx;
		right: 25rpx;
	}
	.all{
		font-size: 26rpx;
		font-weight: bold;
		color: #666666;
		margin-top: 42rpx;
		margin-right: 13rpx;
	}
	.arrow{
		width: 25rpx;
		height: 25rpx;
		margin-top: 48rpx;
		background-image: url(../../static/image/right.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.order-state{
		display: flex;
		justify-content: space-between;
		margin: 0 34rpx;
	}
	.order-box{
		width: 110rpx;
		margin: 28rpx 0;
	}
	.state-img{
		width: 42rpx;
		height: 38rpx;
		margin: 0 auto;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	#payment{
		background-image: url(../../static/image/1.png);
	}
	#deliver{
		background-image: url(../../static/image/2.png);
	}
	#take{
		background-image: url(../../static/image/3.png);
	}
	#evaluate{
		background-image: url(../../static/image/4.png);
	}
	#after-sale{
		background-image: url(../../static/image/5.png);
	}
	.state-text{
		margin-top: 22rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #1A1919;
	}
	.box{
		height: 90rpx;
		display: flex;
		background: #FFFFFF;
		position: relative;
	}
	.box-img{
		margin-top: 26rpx;
		margin-left: 47rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 28rpx;
		height: 30rpx;
	}
	.box-text{
		height: 23rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #1A1A1A;
		margin: 26rpx 25rpx;
	}
	.right{
		width: 30rpx;
		height: 35rpx;
		background-image: url(../../static/image/right.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 30rpx;
		right: 42rpx;
	}
	#address{
		background-image: url(../../static/image/address.png);
	}
	#member{
		background-image: url(../../static/image/member.png);
	}
	#service{
		background-image: url(../../static/image/service.png);
	}
	.mobilleOpen{
	  width: 80%;
	  position:fixed;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%);
	  margin-bottom:60rpx;
	  box-sizing: border-box;
	  z-index: 999;
	  .cloud{
	   position: absolute;
	   right: 0;
	   top: -80rpx;
	   width: 50rpx;
	   height: 50rpx;
	  }
	  image{
	   width: 100%;
	   height: 376rpx;
	  }
	  .mobileBottom{
	   width: 100%;
	   background-color: #fff;
	   text-align:center;
	   padding-bottom: 60rpx;
	   padding-top: 40rpx;
	   box-sizing: border-box;
	   margin-top: -10rpx;
	   .welcome{
	    color: #333333;
	    font-size: 36rpx;
	    margin:0 0 30rpx 0;
	   }
	   .welcomeNum{
	    color: #666666;
	    font-size: 40rpx;
	    margin-bottom:70rpx;
	   }
	   .coplyMobile{
	    width: 80%;
	    margin: 0 auto;
	    background-color: #1B44A5;
	    text-align: center;
	    font-size: 30rpx;
	    color: #fff;
	    line-height: 90rpx;
	    border-radius: 30rpx;
	   }
	  }
	  
	 }
</style>
